<!--
/**
@template: 贵州见证私有组件
选择见证场地
@author: ChaoPengWang(wangcp-a@glodon.com)
@update: 2022/8/4 9:36 PM
-->

<template>
  <!--  -->
  <el-dialog title="新增场地" :visible.sync="showSelectAddressDialog"
             v-loading="isLoading"
             width="900px" :gutter="4" grid>
    <el-form ref="form" :model="selectAddressDialogForm" inline size="mini">
      <el-form-item label="预约人数" :span="2" prop="personNumber">
        <el-select v-model="selectAddressDialogForm.personNumber" placeholder="请选预约人数" style="width: 120px;">
          <el-option
            v-for="pno in personNumberOptions"
            :label="pno + '人'"
            :value="pno"
            :key="pno"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评标时间" :span="2" prop="startTime">
        <el-date-picker v-model="selectAddressDialogForm.evaluationTime"
                        :pickerOptions="pickerOptions"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm"
                        type="datetimerange"
                        placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item :span="8">
        <el-button
          type="primary"
          class="select-address-button"
          @click="getAddressList"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="addressList" class="add-revive-table">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column label="标室名称" align="center" prop="roomName" />
      <el-table-column label="容纳人数" align="center" prop="roomPerson" />
<!--      <el-table-column label="开始时间" align="center" prop="startTime" />-->
<!--      <el-table-column label="结束时间" align="center" prop="endTime" />-->
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-plus" type="primary" @click="setStandardRoomId(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
// import moment from "moment";
import { GZAPI_EvaluationTime } from "../api";
import moment from "moment";
import { genTime } from "./utils";
import { getAddressList, submitBookConfirm } from "@/api/api";

export default {
  name: "gzSelectAddress",
  data: () => ({
    personNumberOptions: ["3", "5", "7", "9", "11"],
    showSelectAddressDialog: false,
    // 预约场地查询条件
    selectAddressDialogForm: {
      personNumber: "3",
      evaluationTime: [],
    },
    pickerOptions: {
      disabledDate(d) {
        return d < moment().subtract(1, 'd');
      },
    },
    // 预约场地列表
    addressList: [{
      type: "远程异地标室",
      name: "评标室12"
    }],
    isLoading: false
  }),
  props: {
  },
  created() {
  },

  methods: {
    open(queryData) {
      // 设置筛选条件为, 评标开始时间
      const { startDate, endDate } = queryData
      this.selectAddressDialogForm.evaluationTime = [startDate, endDate];
      this.showSelectAddressDialog = true;
      this.queryData = queryData;
      this.getAddressList();
    },
    async getAddressList() {
      try {
        const { personNumber, evaluationTime } = this.selectAddressDialogForm;
        let startTime, endTime;
        if(evaluationTime.length === 2) {
          startTime = evaluationTime[0];
          endTime = evaluationTime[1];
        }
        this.isLoading = true;
        const { roomType, projectInfo, roomRemote, sysCode } = this.queryData;
        const { code, data: { respResult, dataList, errorMsg }, message } = await getAddressList({
          personNum: personNumber,
          startDate: moment(startTime).format('YYYYMMDDHHmmss'),
          endDateTime:  moment(endTime).format('YYYYMMDDHHmmss'),
          roomType,
          venueType: `${roomType}_VT`,
          projectInfo,
          isOverNight: "N",
          roomRemote,
          sysCode
        });
        if (code === 0 && respResult === "0" && dataList.length > 0) {
          this.addressList = dataList;
        } else {
          this.addressList = [];
          this.$message.warning(message || errorMsg);
        }
      } catch (e) {
        console.error(e);
      } finally {
        this.isLoading = false;
      }
    },
    async setStandardRoomId(row) {
      await this.$confirm("是否确认选择当前标室？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      const {evaluationTime} = this.selectAddressDialogForm;
      this.$emit("update", row, evaluationTime);
      this.showSelectAddressDialog = false;
    }
  }
};
</script>

<style scoped lang="scss">
.add-revive {
  display: inline-block;
  margin-left: 10px;

  .el-alert--warning.is-light {
    border-color: #fff4e6;
    margin-bottom: 20px;
    align-items: flex-start;
  }

  .add-revive-table {
    margin-bottom: 40px;

    .add-revive-table-td {
      display: flex;
      align-items: center;
      height: 35px;
    }
  }

  .add-revive-bottom {
    display: flex;
    align-items: center;

    & > div:first-child {
      margin-right: 10px;
    }
  }
}

::v-deep .el-input__suffix {
  display: none;
}

::v-deep .el-input--suffix .el-input__inner {
  padding-right: 0;
}

::v-deep .el-table__body,
.el-table__footer,
.el-table__header {
  table-layout: auto;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}
</style>
